<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="864px"
      title="分配"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div
        class="curve-modal-body"
        v-loading="pageLoading"
        id="curve-modal-body"
      >
        <a-row :gutter="0">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-col :span="24">
              <a-form-model-item label="抓拍时间">
                <a-input type="text" v-model="form.snapTime" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="处罚类型" prop="punishType">
                <a-input
                  type="text"
                  v-model="form.punishType"
                  placeholder="请输入处罚类型"
                  :maxLength="255"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="处罚内容">
                <a-input
                  type="textarea"
                  :rows="4"
                  v-model="form.punishContent"
                  placeholder="请输入处罚内容"
                  :maxLength="255"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="抓拍图片">
                <div class="picture-img" v-if="form.picture">
                  <img
                    @click.stop="previewImg(form.picture)"
                    :src="form.picture"
                  />
                </div>
                <a-input v-else value="暂无图片" disabled />
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="onSubmit()" :loading="buttonLoading">
          确定
        </a-button>
      </div>
    </a-modal>
    <!-- 预览 -->
    <PreviewModel :visible.sync="previewVisible" :imgUrl="path"></PreviewModel>
  </div>
</template>

<script>
import PreviewModel from "@/components/PreviewModel";
import { notificationTip } from "@/utils";
import { selectDept, getSnapApprove } from "@/api/wisdom-beam/security-app.js";
export default {
  name: "addModal",
  components: {
    PreviewModel,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      pageLoading: false,
      buttonLoading: false,
      form: {
        //抓拍时间
        snapTime: "",
        //抓拍图片
        picture: "",
        //人员类型
        personCategory: "",
        //处罚类型
        punishType: "",
        //处罚内容
        punishContent: "",
      },
      rules: {
        punishType: [
          {
            required: true,
            message: "请输入处罚类型",
            trigger: "blur",
          },
        ],
      },
      previewVisible: false,
      path: "",
    };
  },
  methods: {
    getData() {
      let { snapTime, picture } = this.parameter;
      this.form.snapTime = snapTime;
      this.form.picture = picture;
      this.getPeopleType();
    },

    //预览图片
    previewImg(url) {
      this.path = url;
      this.previewVisible = true;
    },

    // 人员类型下拉列表
    getPeopleType() {
      selectDept({})
        .then((res) => {
          let { data } = res;
          let list = data?.result || [];
          this.form.personCategory = list?.[0]?.remark || "";
        })
        .catch((_) => {
          this.form.personCategory = "";
        });
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let { form } = this;
          let { id } = this.parameter;
          getSnapApprove({
            id,
            punishContent: form.punishContent,
            punishType: form.punishType,
            personCategory: form.personCategory,
            flag: 1,
          })
            .then((res) => {
              notificationTip("success", "分配成功");
              this.closeModal();
              this.$parent.getData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form = {
        //抓拍时间
        snapTime: "",
        //抓拍图片
        picture: "",
        //人员类型
        personCategory: "",
        //处罚类型
        punishType: "",
        //处罚内容
        punishContent: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px 60px 20px 20px;
    max-height: 630px;
    .custom-scrollbar();
    .picture-img {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 128px;
        height: 122px;
        border-radius: 2px;
        object-fit: contain;
        background-color: #f3f4f6;
      }
    }
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    .flex();
    .ant-form-item-label {
      width: 120px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 40px;
      line-height: 30px;
      label {
        color: #999999;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
